<template>
    <div>
        <Row>
            <Col span="1"></Col>
            <Col span="3">未完成 ({{no_ok_cnt}}条)</Col>
            <Col span="3"><Button type="primary" @click="modal1 = true" icon="md-add" ghost>添加跟进</Button></Col>
            <Col span="3"><Button type="primary" @click="tableLiaisonGo" icon="md-checkmark" ghost>完成</Button></Col>
            <Col span="3"></Col>
        </Row>
        <div class="lisis_tab">
            <Table border ref="selection" :columns="columns" :data="data"></Table>
        </div>
        <Modal class="add_div" title="添加跟进" v-if="modal1" v-model="modal1" :closable="false" :footer-hide="true" @on-visible-change="handleReset('formValidate')">
            <Form ref="formValidate" :rules="ruleValidate" :model="formValidate">
                <Row>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>安排时间</span></Col>
                    <Col span="6">
                        <FormItem prop="sel_date">
                            <DatePicker type="date" @on-change="handleChangeDate" v-model="formValidate.sel_date"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>跟进人</span></Col>
                    <Col span="8">
                        <FormItem prop="folow_name">
                            <Select v-model="formValidate.folow_id">
                                <Option @on-change="handleChangeFolowName" v-for="(item,key) in followList" :key="key" :value="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>联系人</span></Col>
                    <Col span="6">
                        <FormItem prop="liaison_name">
                            <Select v-model="formValidate.liaison_id">
                                <Option @on-change="handleChangeLiaName" v-for="(item,key) in formValidate.liaison_name" :key="key" :value="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>联系方式</span></Col>
                    <Col span="8">
                        <FormItem prop="contact_type">
                            <Select v-model="formValidate.contact_type">
                                <Option value="电话">电话</Option>
                                <Option value="邮件">邮件</Option>
                                <Option value="会面">会面</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label"><span style="color:#D9001B;">*</span><span>跟进阶段</span></Col>
                    <Col span="18">
                        <FormItem prop="follow_stage">
                            <Select v-model="formValidate.follow_stage">
                                <Option value="了解客户需求及开通试用">了解客户需求及开通试用</Option>
                                <Option value="发送资料">发送资料</Option>
                                <Option value="见面沟通">见面沟通</Option>
                                <Option value="确定方案、合同">确定方案、合同</Option>
                                <Option value="续约电话">续约电话</Option>
                                <Option value="培训">培训</Option>
                                <Option value="其他">其他</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label">备注</Col>
                    <Col span="18">
                        <FormItem>
                            <Input v-model="formValidate.remarks" type="textarea" :autosize="{minRows: 2,maxRows: 3}"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="4" class="tit-label">跟进状态</Col>
                    <Col span="18">
                        <FormItem>
                            <CheckboxGroup v-model="formValidate.lias_state">
                                <Checkbox label="已完成"></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem style="text-align:right;">
                    <Button @click="closeAdd">关闭</Button>
                    <Button type="primary" @click="handleSubmit('formValidate')" style="margin-left: 8px">提交</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<style>
    .lisis_tab{margin-top:10px;}
    .add-form-div{position: absolute;top: 300px;right: 30%;background-color: #fff;border-radius: 5px;bordre:1px solid #ccc;}
    .add_div{width:558px;}
    .form-tit{border-bottom:1px solid #ccc;padding:10px;margin-bottom:10px;font-weight:900;}
    .list .add_div .tit-label{text-align: right;margin-right:10px;line-height:30px;}
</style>
<script>
    export default {
        props: ['cid'],
        data () {
            return {
                c_id: 0,
                modal1: false,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '安排时间/人',
                        key: 'name'
                    },
                    {
                        title: '创建时间/人',
                        key: 'create_name'
                    },
                    {
                        title: '联系人',
                        key: 'liaison_name'
                    },
                    {
                        title: '联系方式',
                        key: 'contact_type'
                    },
                    {
                        title: '阶段',
                        key: 'follow_stage'
                    },
                    {
                        title: '备注',
                        key: 'remarks'
                    },
                    {
                        title: '操作',
                        key: 'address'
                    }
                ],
                data: [],
                formValidate: {
                    sel_date: '',
                    folow_id: 0,
                    liaison_name: [],
                    contact_type: '',
                    follow_stage: '',
                    remarks: '',
                    lias_state: [],
                    liaison_id: 0
                },
                ruleValidate: {
                    sel_date: [
                        { required: true, message: '这个是必填项', trigger: 'change', pattern: /.+/}
                    ],
                    folow_id: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ],
                    liaison_id: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ],
                    contact_type: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ],
                    follow_stage: [
                        {required: true, message: '这个是必选项', trigger: 'change'}
                    ]
                },
                no_ok_cnt: 0,
                followList: []
            }
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            handleChangeDate(date) {
                this.formValidate.sel_date = date;
            },
            handleChangeFolowName(folow_id) {
                this.formValidate.folow_id = folow_id;
            },
            handleChangeLiaName(lia_id) {
                this.formValidate.liaison_id = lia_id;
            },
            closeAdd() {
                this.modal1 = false;
            },
            handleSubmit (name) {
                console.log(this.c_id);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http.get('http://jorren-api.iccchina.com/company/companys_follow_log/put_liaison_info',
                            {params:{
                                cid: this.c_id,
                                sel_date: this.formValidate.sel_date,
                                folow_id: this.formValidate.folow_id,
                                liaison_name: this.formValidate.liaison_id,
                                contact_type: this.formValidate.contact_type,
                                follow_stage: this.formValidate.follow_stage,
                                remarks: this.formValidate.remarks,
                                lias_state: this.formValidate.lias_state.length
                            }
                        })
                        .then((data) => {
                            if (data.data.code == 200) {
                                if (this.formValidate.lias_state.length > 0) {
                                    this.$emit("get_ok_list", this.c_id);
                                } else {
                                    this.get_no_ok_list(this.cid);
                                }
                                this.modal1 = false;
                            }
                        })
                    } else {
                        this.$Message.error('验证失败！!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            get_company_info(cid) {
                this.$http.get('http://jorren-api.iccchina.com/company/companys_follow_log/get_liaison_name',{params:{cid: cid}
                })
                .then((data)=>{
                    this.$set(this.formValidate,'liaison_name',data.data.list)
                })
            },
            get_follow_list() {
                this.$http.get('http://jorren-api.iccchina.com/company/companys_follow_log/get_follow_name')
                .then((data)=>{
                    this.followList = data.data.list
                })
            },
            get_no_ok_list(cid) {
                this.$http.get('http://jorren-api.iccchina.com/company/companys_follow_log/get_liaison_nook_list',{params:{cid: cid, state: 1}
                })
                .then((data)=>{
                    this.data = data.data.list
                    this.no_ok_cnt = data.data.cnt
                })
            },
            tableLiaisonGo() {
                // 通过getSelection方法获取table所有选中行数据
                let selectedList = this.$refs.selection.getSelection();
                if(selectedList.length == 0){
                   this.$Message.info('当前选中了' + selectedList.length + '行');
                   return;
                }
                let selectedids = '';
                for(var i = 0; i < selectedList.length; i++){
                    selectedids += selectedids.length > 0 ? ',' + selectedList[i].id : selectedList[i].id;
                }
                this.$http.get('http://jorren-api.iccchina.com/company/companys_follow_log/update_liaison_state',{params:{cid: this.cid, selectids: selectedids}
                })
                .then((data)=>{
                    if (data.data.code == 200) {
                        this.get_no_ok_list(this.cid);
                    }
                })
            }
        },
        mounted() {
            let cid = this.$route.query.cid;
            this.c_id = cid;
            this.get_company_info(cid);
            this.get_no_ok_list(cid);
            this.get_follow_list();
        }
    }
</script>
